<template>
  <el-scrollbar class="side-scroll-bar" :style="{height: scrollerHeight}">
    <div class="panel-container">

    <el-tabs v-model="currentTab" class="no-bottom-margin indent-left-margin">
      <el-tab-pane name="components">
        <template #label>
          <span><svg-icon icon-class="el-set-up" />组件库</span>
        </template>

        <el-collapse v-model="activeNames" class="widget-collapse">
           <el-collapse-item name="1" title="页面组件">
             <draggable
                tag="ul"
                :list="pageWidget"
                item-key="key" 
                :group="{name: 'dragGroup', pull: 'clone', put: false}"
                ghost-class="ghost"
                :force-fallback="true"
                animation="300"
                @start="onStart"
                @end="onEnd"
                :move="onMove"
                :sort="false"
            >
            
              <template #item="{ element: ctn }">
                <li class="container-widget-item" :title="ctn.displayName" @dblclick="addContainerByDbClick(ctn)">
                  <span><svg-icon :icon-class="ctn.icon" class-name="color-svg-icon" />{{ctn.name}}</span>
                </li>
              </template>
            </draggable>
          </el-collapse-item>
          <el-collapse-item name="2" title="布局分栏">
             <draggable
                tag="ul"
                :list="containers"
                item-key="key" 
                :group="{name: 'dragGroup', pull: 'clone', put: false}"
                ghost-class="ghost"
                :force-fallback="true"
                animation="300"
                @start="onStart"
                @end="onEnd"
                :move="onMove"
                :sort="false"
            >
            
              <template #item="{ element: ctn }">
                <li class="container-widget-item" :title="ctn.displayName" @dblclick="addContainerByDbClick(ctn)">
                  <span><svg-icon :icon-class="ctn.icon" class-name="color-svg-icon" />{{ctn.name}}</span>
                </li>
              </template>
            </draggable>
          </el-collapse-item>

          <el-collapse-item name="3" title="表单属性">
          <draggable
                tag="ul"
                :list="basicFields"
                item-key="key" 
                :group="{name: 'dragGroup', pull: 'clone', put: false}"
                ghost-class="ghost"
                :force-fallback="true"
                animation="300"
                @start="onStart"
                @end="onEnd"
                :move="onMove"
                :sort="false"
            >
              <template #item="{ element: fld }">
                <li class="field-widget-item" :title="fld.displayName" @dblclick="addFieldByDbClick(fld)">
                  <span><svg-icon :icon-class="fld.icon" class-name="color-svg-icon" />{{fld.name}}</span>
                </li>
              </template>
            </draggable>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>

      <el-tab-pane  name="templates" style="padding: 8px">
        <template #label>
          <span><svg-icon icon-class="el-form-template" />模板</span>
        </template>
      </el-tab-pane>
    </el-tabs>

    </div>
  </el-scrollbar>
</template>

<script setup lang="ts">
  import { reactive, toRefs, watch} from 'vue'
  import draggable from "vuedraggable";
  import SvgIcon from '@/designer/svgIcon'
  import {containers as CONS, basicFields as BFS, advancedFields as AFS, customFields as CFS} from "./widgetsConfig"

  const state = reactive({
        currentTab:'components',
        activeNames: ['1', '2','3'],
        scrollerHeight: 800,
        pageWidget:[
          {type: 'toolBar', category: 'page', icon: 'grid', name:'工具条'},
          {type: 'search', category: 'page', icon: 'table', name:'查询'},
          {type: 'table', category: 'page', icon: 'table', name:'表格'},
          {type: 'form', category: 'page', icon: 'table', name:'表单'},
          {type: 'tableTree', category: 'page', icon: 'table', name:'表格树'},
        ],
        containers: [
          {type: 'grid', category: 'container', icon: 'grid', name:'栅格'},
        ],
        basicFields: [
          {id:'11', key:'input', type: 'input', icon: 'text-field', formItemFlag: true, name:'单行输入'},
          {id:'12', key:'date', type: 'date', icon: 'date-field', formItemFlag: true, name:'日期'},
          {id:'13', key:'textarea', type: 'textarea', icon: 'text-field', formItemFlag: true, name:'多行输入'},
          {id:'14', key:'select', type: 'select', icon: 'date-field', formItemFlag: true, name:'下拉选项'}
        ],
        customFields: [],
  });
 
  const {
    currentTab,activeNames,scrollerHeight,pageWidget,containers,basicFields,
    advancedFields,customFields,layout
  }  = toRefs(state);
   
 // function handleContainerWidgetClone(origin){
  //  let newObj=JSON.parse(JSON.stringify(origin))
    //添加到组件容器中
 // }
  
   //拖拽开始的事件
    const onStart = () => {
       console.log("开始拖拽");
    };

    //拖拽结束的事件
    const onEnd = () => {
      console.log("结束拖拽");
      
    };

    const onMove = (e, originalEvent) => {
        //不允许停靠
      //  if (e.relatedContext.element.disabledPark == true) return false;

        return true;
    };
  
</script>
<style lang="scss" scoped>
 .color-svg-icon {
    color:#409EFF;
  }

  .side-scroll-bar {
    :deep(.el-scrollbar__wrap) {
      overflow-x: hidden;
    }
  }

  div.panel-container {
    padding-bottom: 10px;
  }

  .no-bottom-margin :deep(.el-tabs__header) {
    margin-bottom: 0;
  }

  .indent-left-margin {
    :deep(.el-tabs__nav) {
      margin-left: 20px;
    }
  }

  .el-collapse-item :deep(ul) > li {
    list-style: none;
  }

  .widget-collapse {
    border-top-width: 0;

    :deep(.el-collapse-item__header) {
      margin-left: 8px;
      font-style: italic;
      font-weight: bold;
    }

    :deep(.el-collapse-item__content) {
      padding-bottom: 6px;

      ul {
        padding-left: 10px;  /* 重置IE11默认样式 */
        margin: 0;  /* 重置IE11默认样式 */
        margin-block-start: 0;
        margin-block-end: 0.25em;
        padding-inline-start: 10px;

        &:after {
          content: "";
          display: block;
          clear: both;
        }

        .container-widget-item, .field-widget-item {
          //text-align: center; // 居中显示不太美观
          display: inline-block;
          height: 28px;
          line-height: 28px;
          width: 115px;
          float: left;
          margin: 2px 6px 6px 0;
          cursor: move;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          background: #f1f2f3;
        }

        .container-widget-item:hover, .field-widget-item:hover {
          background: #EBEEF5;
          outline: 1px solid #409EFF;
        }

        .drag-handler {
          position: absolute;
          top: 0;
          left: 160px;
          background-color: #dddddd;
          border-radius: 5px;
          padding-right: 5px;
          font-size: 11px;
          color: #666666;
        }
      }
    }
  }

  .el-card.ft-card {
    border: 1px solid #8896B3;
  }

  .ft-card {
    margin-bottom: 10px;

    .bottom {
      margin-top: 10px;
      line-height: 12px;
    }

    /*
    .image-zoom {
      height: 500px;
      width: 620px
    }
    */

    .ft-title {
      font-size: 13px;
      font-weight: bold;
    }

    .right-button {
      padding: 0;
      float: right;
    }

    .clear-fix:before, .clear-fix:after {
      display: table;
      content: "";
    }

    .clear-fix:after {
      clear: both;
    }

  }

</style>